<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入公共的Js和Css -->
      <!-- 新 Bootstrap 核心 CSS 文件 -->
	  <!-- <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
	 <link href="${BASE}/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
	 <link href="${BACKSTAGE}/css/main.css" rel="stylesheet">
 
	<!-- 可选的Bootstrap主题文件（一般不使用） -->
	<!-- <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>-->
 	<script src="${BASE}/bootstrap-3.3.7/css/bootstrap-theme.min.css"></script>
 
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<!-- <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> -->
	<script src="${BASE}/scripts/jquery.min.js"></script> 
 
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<!-- <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
	<script src="${BASE}/bootstrap-3.3.7/js/bootstrap.min.js"></script>
	<script src="${BACKSTAGE}/scripts/test.js"></script> 
	
	 
</head>
<body id="body">

<!-- <div class="navbar navbar-duomi navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#" id="logo">后台管理系统
                </a>
            </div>
        </div>
    </div>  -->
     <div class="nav navbar-duomi navbar-static-top" role="navigation">
            <div class="container-fluid">
                                    
                        <div class="navbar-header">        
                            <!-- 隐藏按钮当页面小于默认为768像素时，隐藏响应式布局里的内容，显示此按钮  
                                 data-target=".nav-collapse" 找的是下面设置响应布局的 div
                             -->
                            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>  <!--每一个”span 标签就是一个小横线  这里的按钮就是由3小横线组成“-->
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <!-- 添加一个logo  因为导航栏的高度默认为50pk 为了以防外一将logo的高度设为50px-->
                            <a href="#" class="navbar-brand">
                                <img src="img/{1Y(FB52``7)ZKN(0EYQUZY.jpg" style="height: 50px; margin-top:-15px;"/>
                            </a>
                        </div>
                
                <!-- 
                    class="collapse nav-collapse" 将当前div里的模块变成响应式布局
                -->
                <div class="collapse navbar-collapse">                
                        <!-- 导航列表-->
                        <ul class="nav navbar-nav">
                            <!-- class="active"  为默认被选中的菜单 -->
                            <li class="active"><a href="main.do">首页</a></li>
                            <li><a href="#">用户列表</a></li>
                            <li><a href="#">订单列表</a></li>    
                        </ul>
                            
                        <!--导航的搜索框 
                            class="navbar-form navbar-right"  第一个类标签标记为搜索栏
                                                                第二个"navbar-right"设置为靠右显示                                                            
                        -->
                        <div class="navbar-form navbar-right">
                            <input type="text" class="form-control" placeholder="请输入关键字"/>
                            <button class="btn btn-primary">搜索</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                           <!--  <a href="login.do" class="navbar-link" style="font-size: 18px; color: #FFFFFF">注销</a>
                            &nbsp;&nbsp;&nbsp;&nbsp; -->
                           <!--  <a href="#" class="navbar-link" style="font-size: 18px; color: #FFFFFF">注 册</a>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
                        </div>
                        <div class="navbar-form navbar-right">
                             <ul>
                            	<li class="dropdown">
									 <a href="#" class="dropdown-toggle" data-toggle="dropdown">${username}<strong class="caret"></strong></a>
									<ul class="dropdown-menu">
										<li>
											 <a href="login.do">注销</a>
										</li>
										<li>
											 <a href="#">修改密码</a>
										</li>
										<li>
											 <a href="#">修改信息</a>
										</li>
										<li class="divider">
										</li>
										<li>
											 <a href="#">返回至前端</a>
										</li>
									</ul>
								</li>
							</ul>
                        </div>
                       
                </div>    
            </div>
        </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                    <li class="active">
                        <a href="javascript:void(0)" onclick="test()">
                            <i class="glyphicon glyphicon-th-large"></i>
                            	首页         
                        </a>
                    </li>
                    <li>
                        <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                            <i class="glyphicon glyphicon-cog"></i>
                           		 系统管理
                               <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                        </a>
                        <ul id="systemSetting" class="nav nav-list collapse secondmenu" >
                            <li><a href="#"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
                            <!-- <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li> -->
                            <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
                            <!-- <li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li> -->
                            <!-- <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li> -->
                        </ul>
                    </li>
                    <li>
                   		<a href="#productManage" class="nav-header collapsed" data-toggle="collapse">
                            <i class="glyphicon glyphicon-credit-card"></i>
                           		 产品管理
                               <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                        </a>
                         <ul id="productManage" class="nav nav-list collapse secondmenu" >
                            <li><a href="#"><i class="glyphicon glyphicon-barcode"></i>产品发布</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-tags"></i>分类管理</a></li>
                        </ul>
                        
                    </li>
                    <li>
                    
                    	<a href="#orderManage" class="nav-header collapsed" data-toggle="collapse">
                            <i class="glyphicon glyphicon-list-alt"></i>
                           		 订单管理
                           	<span class="pull-right glyphicon glyphicon-chevron-down"></span><span class="label label-warning pull-right">5</span>
                        </a>
                         <ul id="orderManage" class="nav nav-list collapse secondmenu" >
                            <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>订单列表</a></li>
                        </ul>
                       <!--  <a href="./grid.html">
                            <i class="glyphicon glyphicon-globe"></i>
                            	分发配置
                            <span class="label label-warning pull-right">5</span>
                        </a> -->
                    </li>
                    <!-- <li>
                        <a href="./charts.html">
                            <i class="glyphicon glyphicon-calendar"></i>
                            	图表统计
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="glyphicon glyphicon-fire"></i>
                            	关于系统
                        </a>
                    </li> -->
                </ul>
            </div>
            <div class="col-md-10">
                	<table class="table table-striped">
						<caption>条纹表格布局</caption>
						<thead>
							<tr>
								<th>名称</th>
								<th>城市</th>
								<th>邮编</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Tanmay</td>
								<td>Bangalore</td>
								<td>560001</td>
							</tr>
							<tr>
								<td>Sachin</td>
								<td>Mumbai</td>
								<td>400003</td>
							</tr>
							<tr>
								<td>Uma</td>
								<td>Pune</td>
								<td>411027</td>
							</tr>
						</tbody>
					</table>
					
					<ul class="pagination">
							<li><a href="#">&laquo;</a></li>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">&raquo;</a></li>
					</ul>
					
					<table class="table">
						<caption>上下文表格布局</caption>
						<thead>
							<tr>
								<th>产品</th>
								<th>付款日期</th>
								<th>状态</th>
							</tr>
						</thead>
						<tbody>
							<tr class="active">
								<td>产品1</td>
								<td>23/11/2013</td>
								<td>待发货</td>
							</tr>
							<tr class="success">
								<td>产品2</td>
								<td>10/11/2013</td>
								<td>发货中</td>
							</tr>
							<tr  class="warning">
								<td>产品3</td>
								<td>20/10/2013</td>
								<td>待确认</td>
							</tr>
							<tr  class="danger">
								<td>产品4</td>
								<td>20/10/2013</td>
								<td>已退货</td>
							</tr>
						</tbody>
					</table>
					<ul class="pagination pagination-lg">
						<li><a href="#">&laquo;</a></li>
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li><a href="#">&raquo;</a></li>
					</ul><br>

            </div>
        </div>
    </div>
 

</body>
</html>